<script setup>
import {ref} from 'vue';
const activeIndex = ref("1")
</script>
<template>
  <el-container >
    <el-header  class="page-header" >
      <el-affix target=".mainBox">
        <el-row class="arow">
          <el-col :span="4" class="item-center">
            <div class="text-center">
              智慧商城
            </div>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="10" >
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                background-color= $bgc
                text-color="#fff"
                active-text-color= $bg-action

                router
            >
              <el-menu-item  index="home">-home-</el-menu-item>
              <el-menu-item  index="index">-数据统计-</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="2" class="item-center"><a href="/smart/login"><i class="bi bi-signpost"></i>登录</a></el-col>
        </el-row>
      </el-affix>

    </el-header>
    <el-main class="mainBox" style="padding-bottom: 0;">
      <!--      二级路由出口-->
      <router-view></router-view>
    </el-main>

  </el-container>
</template>

<style lang="scss" scoped>
:root{
  --el-menu-hover-bg-color:#86b7fe;
}
  $w:120px;
  $bg-action:var(--bs-primary-rgb);
  .arow{
    background-color: $bgc-header;
    color: white;
  }
  .menu{
    height: 90px;
  }
  .page-header{
    background-color: $bgc-header;

  }

  .pageFooter{
    height: max($w*3);
    background-color: #070b3b;
    color: #d7ffff;
    .pageFooterBox{
      position: relative;
      padding-top: $w*0.167;
      padding-right: $w;
      padding-left: $w;
      height: $w*3-$w*0.167;
      text-align: center;
      p{
        margin: 0 auto;
        position: absolute;
        left: $w;
        right: $w;
        bottom: 0;
        color: #d7ffff;
      }
    }
  }
</style>
